<template>
  <!-- 4计划审批 - 关联文档 Tab1 - 协同 -->
  <div class="doc-tab1">
    <div class="tab-search-part">
      <el-radio-group class="search-left" v-model="radioIdx">
        <el-radio v-for="(i, idx) in radioList" :key="i.v" :label="i.v"> {{i.l}} </el-radio>
      </el-radio-group>
      <div class="search-right">
        <el-select class="sel-label" v-model="labelSel" placeholder="请选择">
          <el-option
            v-for="(i,idx) in selectList"
            :key="i.v"
            :label="i.l"
            :value="i.v">
          </el-option>
        </el-select>
        <el-input class="sel-ipt" v-if="labelSel == '0' || labelSel == '2' || labelSel == '4'" v-model="formData.ipt"></el-input>
        <el-select class="sel-ipt" v-if="labelSel == '1'" v-model="formData.sel" clearable>
          <el-option
            v-for="(i,idx) in levelList"
            :key="i.v"
            :label="i.l"
            :value="i.v">
          </el-option>
        </el-select>
        <el-date-picker
          class="sel-date"
          v-if="labelSel == '3'"
          v-model="formData.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:300px;border-radius: 0;">
        </el-date-picker>
        <el-button icon="el-icon-search" @click="queryForm" clearable class="search-btn"></el-button>
      </div>
    </div>
    <div class="tab-content-part">
      <selTable 
        ref="selTable"
        v-loading="loading"
        :colConfigs="customColumns"
        :list="tableData"
        :pageNum="page.pageNum"
        :pageSize="page.pageSize"
        :total="page.total"
        tableType="docTab1"
        @onSelect="getSelectDocs"
      >
      </selTable>
      <div v-if="selectedDocs && selectedDocs.length>0" class="tag-list">
        <el-tag v-for="(i,idx) in selectedDocs" :key="idx" type="info" closable @close="delTag(i)" style="margin-right:5px;"> 
          <span> {{i.title}} </span>
          <span v-if="i.userName"> - {{i.userName}} </span>
          <span v-if="i.dateTime"> - {{i.dateTime}} </span>
        </el-tag>
      </div>
      <div v-else class="no-chose">已选择</div>
    </div>
  </div>
</template>

<script>
import { docTableData, docTableCol } from '../../js/staticData';
import selTable from '../../components/selTable';
export default {
  name: "docTab1",
  components: { selTable },
  data() {
    return {
      loading: false,
      radioIdx: '0',
      radioList: [
        {l: '已发', v: '0'},
        {l: '待办', v: '1'},
        {l: '已办', v: '2'},
        {l: '交接给我的事项', v: '3'}
      ],
      selectList: [],
      labelSel: '0',
      formData: {
        ipt: '',
        sel: '',
        date: []
      },
      levelList: [
        {l: '普通', v: '0'},
        {l: '重要', v: '1'},
        {l: '非常重要', v: '2'}
      ],
      tableData: [],
      customColumns: [],
      showIdx: false,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      selectedDocs: [],
    }
  },
  props: {},
  watch: {
    radioIdx(n) {
      if(n == '3') {
        this.labelSel = '4';
        this.customColumns = docTableCol;
        this.selectList = [
          {l: '交接人', v: '4'},
          {l: '标题', v: '0'},
          {l: '重要程度', v: '1'},
          {l: '发起人', v: '2'},
          {l: '发起时间', v: '3'}
        ]
      } else {
        this.labelSel = '0';
        this.selectList = [
          {l: '标题', v: '0'},
          {l: '重要程度', v: '1'},
          {l: '发起人', v: '2'},
          {l: '发起时间', v: '3'}
        ]
        this.customColumns = docTableCol.filter(i => i.label !='交接人');
      }
      this.tableData = docTableData[this.radioIdx];
    },
    selectedDocs: {
      handler(n, o) {},
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.tableData = docTableData[this.radioIdx];
      this.customColumns = docTableCol.filter(i => i.label !='交接人');
      this.selectList = [
        {l: '标题', v: '0'},
        {l: '重要程度', v: '1'},
        {l: '发起人', v: '2'},
        {l: '发起时间', v: '3'}
      ]
    }, 200)
  },
  methods: {
    /**
     * @author Wrl
     * 删除已选中标签
     */
    delTag(item) {
      let title = item.title;
      let userName = item.userName ? `-${item.userName}` : '';
      let dateTime = item.dateTime ? `-${item.dateTime}` : '';
      this.$confirm(`您确定不再关联“${title}${userName}${dateTime}”吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$refs.selTable.multipleSelection = this.$refs.selTable.multipleSelection.filter(i => i.title == item.title);
        this.$refs.selTable.toggleSelection(this.$refs.selTable.multipleSelection);
        setTimeout(() => {
          this.loading = false;
          document.querySelector('.v-modal').style.display = "none";
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }, 500)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    /**
     * @author Wrl
     * 列表选中数据
     */
    getSelectDocs(arr) {
      this.selectedDocs = arr;
    },
    /**
     * @author Wrl
     * 查询列表
     */
    queryForm() {
      this.$message.info('开发中。。。')
    },
    /**
     * @author Wrl
     * 
     */
    refresh() {
      this.radioIdx = '0';
      this.selectedDocs = [];
      this.$refs.selTable.multipleSelection = [];
    }
  }
}
</script>

<style lang="scss" scoped>
  .doc-tab1 {
    .tab-search-part {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      .search-left {
        width: 40%; 
      }
      .search-right {
        width: 60%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        ::v-deep {
          .sel-label {
            width: 105px;
            .el-input__inner {
              border-radius: 4px 0 0 4px;
            }
          }
          .sel-ipt {
            width: 160px;
            .el-input__inner {
              border-radius: 0;
            }
          }
          .sel-date {
            width: 300px;
            .el-input__inner {
              border-radius: 0;
            }
          }
          .search-btn {
            width: 40px;
            padding: 10px 6px;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
    .tab-content-part {
      margin-top: 10px;
      .no-chose,
      .tag-list {
        width: 100%;
        height: 100px;
        padding: 16px;
        background: #fafafa;
      }
    }
  }
</style>